<template>
  <view style="background: #fff;">
    <view class="topPart"  :style="{backgroundImage: 'url(' + bgImage +')'}">
      <image :src="brandObj.avator" class="avrImg"></image>
      <view class="name">{{brandObj.name}}</view>
    </view>
    <view class="goodList" v-if="goodList && goodList.length > 0">
      <scroll-view scroll-y="true" show-scrollbar="false"  style="height: calc(100vh - 232rpx);" @scrolltolower="lower" class="">
        <view class="goodItem" v-for="(item, index) in goodList" :key="index" @click="jumpdetails(item.id)">
          <image :src="item.imageUrl" class="goodImg"></image>
          <view class="goodDes dhColor" >
            <view class="title text2Ellipsis">{{item.name}}</view>
            <view class="price">
              <text class="ft36">￥{{item.price}}</text>
              <text class="orgPrice" v-if="!item.hiddenMarketPrice">原价¥{{item.retailPrice}}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <view style="display: flex; flex-direction: column; align-items: center;height: calc(100vh - 232rpx);" v-if="isRequest&&(!goodList || goodList.length==0)">
      <image :src="$store.state.imgBaseUrl + '/empty_list.png'" style="width: 340rpx;height: 340rpx;margin-top: 153rpx;"></image>
      <text style="height:36rpx;font-size:38rpx;font-weight:500;color:rgba(51,51,51,1);line-height: 36rpx;">暂无数据</text>
      <text style="height:29rpx;font-size:30rpx;font-weight:500;color:rgba(102,102,102,1);line-height: 29rpx;margin-top: 35rpx;">先去逛逛吧~</text>
    </view>
  </view>
</template>
<script>
import { findGoodsByBrand,findBrandInfo } from '../../service/purchaseShop/brand.service.js'
export default {
  data() {
    return {
      type: 1,
      branId: '',
      brandObj: {},
      goodList: '',
      ascs: '',
      page: {
        size: 10,
        current: 1
      },
      count: 0,
      isRequest:false,
      bgImage: this.$store.state.imgBaseUrl + '/brand_top_bg.png',
    }
  },
  onLoad(options) {
    if (options.branId) {
      this.branId = options.branId
      this.brandObj.name = options.brandName
      this.brandObj.avator = options.pic
      // this.findbrand()
    }
  },
  created() {
    this.goListHandler()
  },
  methods: {
    findbrand () {
      var params = {
        size: 1,
        current: 1,
        id: this.branId
      }
      findBrandInfo(params,(res => {
        if (res.data) {
          this.brandObj = res.data.records[0]
        }
      }))
    },
    goListHandler () {
      this.findBybrand()
    },
    lower () {
      if (this.count > this.goodList.length) {
        this.page.current++
        this.goListHandler()
      }
    },
    findBybrand () {
      var params = {
        size: this.page.size,
        current: this.page.current,
        // ascs: 'discountPrice',
        brandId: this.branId
      }
      findGoodsByBrand(params,(res => {
        this.isRequest = true
        if (res.data) {
          if (this.page.current === 1) {
            this.goodList = res.data.records
          } else {
            this.goodList = this.goodList.concat(res.data.records)
          }
          this.count = res.data.total
        }
      }))
    },
    jumpdetails(id){
      uni.navigateTo({
        url: '/pages/purchaseShop/goodsDetail?id=' + id
      })
    },
  }
}
</script>

<style scoped lang="scss">
.topPart{height: 232rpx;overflow: hidden;background-size: 100% 100%;
  .avrImg{width: 98rpx;height: 98rpx;border-radius: 8rpx;margin:44rpx auto 10rpx auto;display: block;}
  .name{text-align: center;line-height: 32rpx;font-size:24rpx;color:rgba(51,51,51,1);}
}
.goodList{width: 700rpx;margin:0rpx auto;background: #fff;}
.goodList .goodItem{width: 700rpx;height: 240rpx;border-radius: 10rpx;background: #fff;padding: 20rpx;box-sizing: border-box;margin-bottom: 24rpx;}
.goodList .goodItem{
  .goodImg{width: 200rpx;height: 200rpx;float: left;}
  .dhColor{color: #FF3F28;
    .cp{background:#FF3F28;}
    .reward{border:1rpx solid #FF3F28;padding: 0 20rpx;border-radius: 4rpx;line-height: 36rpx;}
  }
  .goodDes{
    margin-left: 222rpx;
	height: 200rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
    .title{color: #333;line-height: 44rpx;height: 88rpx;font-size:32rpx;color:rgba(51,51,51,1);}
	.text2Ellipsis {
	    overflow: hidden;
	    text-overflow: ellipsis;
	    display: -webkit-box;
	    -webkit-line-clamp: 2;
	    -webkit-box-orient: vertical;
	}
    .price{
      .ft36{
		  height:48rpx;
		  font-size:36rpx;
		  font-family:PingFangSC-Medium;
		  line-height:48rpx;
		  color:rgba(205,67,57,1);
		}
      .orgPrice{color: #ACACAC;text-decoration: line-through;margin-left: 50rpx;height:28rpx;font-size:20rpx;line-height: 20rpx;}
    }
  }
}
</style>
